<template>
	<view class="wrap">
		<u-form :model="form" ref="uForm" label-width="160">
			<view class="main">
				<u-form-item prop="content" :border-bottom="false">
					<u-input v-model="form.content" placeholder="请输入您的反馈原因" placeholder-class="app_phc" type="textarea"
						height="340" maxlength="-1" :clearable="false" />
				</u-form-item>
				<u-form-item label="添加图片" :border-bottom="false" label-position="top"
					:label-style="{height: '34rpx',paddingLeft: '10rpx'}">
					<u-upload del-bg-color="#888" max-count="10" :action="action" @on-uploaded="onUploaded"
						@on-remove="onRemove" name="file" width="152" height="152">
					</u-upload>
				</u-form-item>
			</view>
			<view class="phone">
				<u-form-item label="联系方式" prop="phone" required>
					<u-input v-model="form.phone" placeholder="请输入手机号码或邮箱" placeholder-class="app_phc" maxlength="11" />
				</u-form-item>
			</view>
		</u-form>
		<view class="btn">
			<g-btn title="提交" @click="onConfirmTap"></g-btn>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					content: '',
					phone: ''
				},
				action: '',
				uploadImgList: []
			}
		},
		onLoad(options) {
			this.action = `${this.$g_config.requestUrl}/api/common/common/upload`
		},
		methods: {
			onUploaded(lists, name) {
				console.log(lists);
				let arr = []
				lists.forEach(item => {
					if (item.response?.fileName) {
						arr.push(item.response.fileName)
					}
				})
				this.uploadImgList = arr
			},
			onRemove(index, lists, name) {
				let arr = []
				lists.forEach(item => {
					if (item.response?.fileName) {
						arr.push(item.response.fileName)
					}
				})
				this.uploadImgList = arr
			},
			onConfirmTap() {
				let picUrl = ''
				if (this.uploadImgList.length > 0) {
					picUrl = this.uploadImgList.join(',')
				}
				if (!this.form.content) {
					uni.showToast({
						title: '请输入反馈内容'
					})
					return
				}
				if (!this.form.phone) {
					uni.showToast({
						title: '请输入手机号码或邮箱'
					})
					return
				}
				this.$g_api.independentFeed({
					contact: this.form.phone,
					content: this.form.content,
					images: picUrl,
					userType: 2,
				}).then(({
					data
				}) => {
					uni.showToast({
						title: '提交成功'
					})
					uni.navigateBack({
						delta: 1
					})
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding-bottom: 150rpx;
	}

	.main {
		padding: 30rpx;
		background-color: #fff;
	}

	.phone {
		margin-top: 20rpx;
		padding: 0 30rpx;
		background-color: #fff;
	}

	.btn {
		margin-top: 150rpx;
	}
</style>
